<template>
  <div>
    <div class="demo-inner-divider">基础抽屉</div>
    <e-button type="primary" @click="handleClick">打开抽屉</e-button>
    <div class="demo-inner-divider" style="margin-top:50px">可操作抽屉</div>
    <e-button type="primary" @click="operationVisible=true">操作抽屉</e-button>
    <e-drawer  v-model="visible" title="这是标题"  width="512" >
      <div>这是内容</div>
    </e-drawer>
    <e-drawer  v-model="operationVisible" title="标题"  width="512" :maskClosable="false">
      <div>表单操作</div>
      <div class="footer">
        <e-button @click="handleClose" style="margin-right:20px">取消</e-button>
        <e-button @click="handleClose" type="primary">确定</e-button>
      </div>
    
    </e-drawer>
    <drawer-md class="markdown-body" style="margin-top:50px"></drawer-md>
  </div>
</template>

<script>
import drawerMd from '../../docs/drawer.md';
export default {
  components: {
    drawerMd
  },
  data(){
    return{
      visible:false,
      operationVisible:false
    }
  },
  methods:{
    handleClick(){
      this.visible=true
    },
    handleClose(){
      this.operationVisible=false
    }
  }
};
</script>
<style>
.footer{
  width:95%;
  padding:15px 20px;
  position:absolute;
  bottom:0;
  border-top:1px solid #e8e8e8;
  text-align: right;
}
</style>
